<template>
  <div>
    <radio-group class="radio-group" @change="radioChange">
      <div class="deliveryPop">
        <dl v-for="(item,index) in settleData.shipping_method" :key="index" @click="toCashierPage(item)">
          <dt>
            <label class="radio">
              <radio :value="item.shipping_id" :checked="item.shipping_id == defaultshippingId.shipping_id" /> {{item.shipping_title}}
            </label>
            <font>运费总计：{{item.currency_logo}}{{item.freight}}</font>
          </dt>
          <dd>
            <text>{{item.shipping_description}}</text>
            <span v-if="item.url" @click.stop="toH5webView(item.url)">详细说明 &gt;</span>
          </dd>
        </dl>
      </div>
    </radio-group>
  </div>
</template>

<script>
import {mapState, mapActions, mapMutations} from 'vuex'
import {cartAction} from '@/store/funnames'
export default {
  data() {
    return {
      dec:[]
    }
  },
  onLoad() {
    this.$wx.setTitleBarTitle('配送说明');
  },
  computed: {
    // 计算属性的 getter
    ...mapState('cart', ['settleData','defaultshippingId'])
  },
  methods: {
    ...mapActions('cart', [
       'checkSettle'
      ]),
    ...mapMutations('cart', {
       modifyShippingId: cartAction.ACTION_SHIPPINGID
    }),
    toCashierPage(shippingID){
      this.selectShipping(shippingID)
    },
    toH5webView(url){
      this.$wx.jumper('../h5webView/main?pageUrl='+ url + '&pageTitle=运费说明');
    },
    async selectShipping(shippingId){
      this.modifyShippingId(shippingId);
      await this.checkSettle({isSettlePage:true, shipping_id:shippingId.shipping_id})
      this.$wx.back(1)
    }
  },
}
</script>

<style scoped>
.deliveryPop{position: fixed; top:0; left:0; width: 100%; height:100%; background:#f5f5f5; z-index: 9999}
.deliveryPop dl{padding: 4%; background: #fff; margin-bottom: 4%}
.deliveryPop dl dt{padding: 4px 0; overflow: hidden;}
.deliveryPop dl dt font{float: right; color: #aaa; font-size: .8em}
.deliveryPop dl dd{color: #666; padding-left: 24px}
.deliveryPop dl dd span{display:block; text-align:right; color: #000}
</style>
